<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body{
		background-image: url("../zombimgs/bg1.jpg");
		margin: 0;
		background-repeat: no-repeat;
		overflow: hidden;
	}
	img{
		position:absolute;
		width: 100px;
		height: 100px;
	}
	#success_h3{
		float:left;
		margin-left:10px;
		color:black;
		background-color: pink;
	}
	#fail_h3{
		float:right;
		margin-right:15px;
		color:black;
		background-color: pink;
	}
	
</style>
<script type="text/javascript">
  //声明全局变量
	var successCount =0;
	var failCount=0;
	
	
	onload = function(){
		changeBG();
	}
	/*窗口尺寸改变事件*/
	onresize = function(){
		changeBG();
	}
	function changeBG(){
		var w = document.body.clientWidth;
		var h = document.body.parentElement.clientHeight;
		//alert(w+":"+h);  验证是否获取到了高 宽;
		//修改body的背景图片尺寸
		document.body.style.backgroundSize = w+"px "+h+"px ";    //这里px后必须加空格 有个隐式转换
	}
	//开启定时器添加僵尸图片
	var Timer = setInterval(function(){
		var img = document.createElement("img");
		//控制僵尸图片
		var type = parseInt(successCount/20);
		if(type>3){
		type=3;	
	}
		img.src = "../zombimgs/zomb"+type+".png";	
		
		
		//得到一个top的随机值
		var h = document.body.parentElement.clientHeight;
		var top =parseInt(Math.random()*(h-100));
		//设置僵尸图片距上边缘的距离
		img.style.top = top+"px";
		//设置僵尸图片距左侧的距离
		var w = document.body.clientWidth;
		img.style.left = w+"px";
		document.body.appendChild(img);
		
		
		//给僵尸图片添加鼠标移入事件
		img.onmouseover = function(){
			//删除鼠标碰到的僵尸
			document.body.removeChild(img);
			//统计成功数量
			successCount++;
			success_h3.innerText ="成功数量:"+successCount;
		};
		
	},100);
	
	//开启定时器移动僵尸
	var moveTimer = setInterval(function(){
		var arr = document.getElementsByTagName("img");
		for(var i=0;i<arr.length;i++){
			var oldLeft = parseInt(arr[i].style.left);
			
			
			//每干掉20个僵尸 移动速度+1
			var speed = parseInt(successCount/20);
			// 僵尸的移动速度随着消灭的数量逐渐递增
			oldLeft -=(2+speed);
			arr[i].style.left = oldLeft+"px";
			if(oldLeft<=0){
				//删除僵尸
				document.body.removeChild(arr[i]);
				//统计失败数量
				failCount++;
				fail_h3.innerText = "失败数量:"+failCount;
				//判断失败
				if(failCount>=30){
					
					alert("Game Over!游戏结束")
					
					clearInterval(Timer);
					clearInterval(moveTimer);
					//游戏结束时弹出一句话。  
					document.body.innerHTML = "<h1>游戏结束,共歼灭"+successCount+"个僵尸</h3>"
				}
			}
		}

	},10);  //僵尸的移动速度
</script>
</head>
<body>
<h3 id="success_h3">成功数量:0</h3>
<h3 id="fail_h3">失败数量:0</h3>
</body>
</html>